<template>
  <div class="div">
    <el-row class="everyRow">
        <el-col style="height:100%;width:100%;display:flex;flex-direction: column;">
            <el-row class="head">
                <button :class="showOne1?'click':'notClick'" @click="clickOne1">个人信息</button>
                <button :class="showOne1?'notClick':'click'" @click="clickOne2">资料修改</button>
            </el-row>
            <el-row class="content">
                <el-col v-if="showOne1"  class="everyCol"><!--个人信息页-->
                    <el-row class="img">
                        <img src="../../../assets/img/common/touxiang.png" class="touxiang" />
                    </el-row>
                    <el-row class="allRow">
                        <span>用户名：{{ user.username }}</span>
                    </el-row>
                    <el-row class="allRow">
                        <span>学工号：{{ user.userId }}</span>
                    </el-row>
                    <el-row class="allRow">
                        <span>邮箱：{{ user.email }}</span>
                    </el-row>
                    <el-row class="allRow">
                        <span>职位：{{ user.type }}</span>
                    </el-row>
                    <el-row class="allRow">
                        <span>电话：{{ user.phone }}</span>
                    </el-row>
                </el-col>
                <el-col v-if="!showOne1" class="everyCol"><!--资料修改页-->
                    <el-row class="tou">
                        <el-col class="beforeCol">
                            <span>头像：</span>
                        </el-col>
                        <el-col class="afterCol">
                            <img src="../../../assets/img/common/touxiang.png" class="touxiang" />
                        </el-col>
                    </el-row>
                    <el-row class="updateRow">
                        <el-col class="beforeCol">
                            <span>手机号：</span>
                        </el-col>
                        <el-col class="afterCol">
                            <input class="inputUpdate" v-model="elphone">
                        </el-col>
                    </el-row>
                    <el-row class="updateRow">
                        <el-col class="beforeCol">
                            <span>邮箱：</span>
                        </el-col>
                        <el-col class="afterCol">
                            <input class="inputUpdate" v-model="elemail">
                        </el-col>
                    </el-row>
                    <el-row class="dashed-line">
                    </el-row>
                    <el-row class="updateRow">
                        <el-col class="beforeCol">
                            <span>密码：</span>
                        </el-col>
                        <el-col class="afterCol">
                            <input class="inputUpdate" v-model="elpassword" type="password">
                        </el-col>
                    </el-row>
                    <el-row class="updateRow">
                        <button class="updateBtn" @click="cancelUpdate">取消修改</button>
                        <button class="updateBtn" @click="update">确认修改</button>
                    </el-row>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row class="everyRow">
        <el-col style="height:100%;width:100%;display:flex;flex-direction: column;">
            <el-row class="head">
                <button :class="showOne2?'click1':'notClick1'" @click="clickTwo1">电子钱包</button>
                <!-- <button :class="showOne2?'notClick':'click'" @click="clickTwo2">钱包充值</button> -->
            </el-row>
            <el-row class="content">
                <el-col v-if="showOne2" class="everyCol"><!--电子钱包页-->
                    <el-row class="img2">
                        <img src="../../../assets/img/common/touxiang.png" class="touxiang" />
                    </el-row>
                    <el-row class="yve">
                        <span style="font-size:18px;font-weight:bold;letter-spacing:2px;">账户余额</span>
                    </el-row>
                    <el-row class="yve">
                        <span style="font-size:35px;font-weight:bold;letter-spacing:2px;">￥ {{ user.money }}</span>
                    </el-row>
                    <el-row class="yve1">
                        <span style="font-size:18px;letter-spacing:2px;color:rgba(42, 130, 228, 1); cursor: pointer;" >资金明细</span>
                    </el-row>
                    <el-row class="yve1">
                        <span style="font-size:18px;letter-spacing:2px;color:rgba(42, 130, 228, 1); cursor: pointer;" 
                        @click="dialogVisible=true">去充值</span>
                    </el-row>

                </el-col>
                <!-- <el-col v-if="!showOne2" class="everyCol">钱包充值页 -->
                    <!-- <img src="../../../assets/img/common/pay.jpg" class="pay" /> -->
                <!-- </el-col> -->
                <el-dialog
                                                :visible.sync="dialogVisible"
                                                 width="30%">
                                                 <el-col style="display:flex;align-items: center;justify-content: center;">
                                                 <span style="font-size:17px;">充值金额：</span>
                                                 <el-input size="mini" style="width:150px" v-model="money"></el-input>
                                                </el-col>
                                                 <span slot="footer" class="dialog-footer">
                                                 <el-button @click="dialogVisible = false">取 消</el-button>
                                                 <el-button type="primary" @click="toPay">确 定</el-button>
                                                 </span>
                                            </el-dialog>
            </el-row>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "mySetting",
  mounted(){
    this.getUser()
  },
  data() {
    return {
      showOne1:true,//第一个分页，true显示左边，false显示右边
      showOne2:true,//第二个分页，true显示左边，false显示右边
      user:{
       
      },
      elphone:'',
      elemail:'',
      elpassword:'',
      userId:'24123',
      dialogVisible:false,
      money:''
    };
  },
  methods: {
    clickOne1(){
        this.showOne1=true;
    },
    clickOne2(){
        this.showOne1=false;
    },
    clickTwo1(){
        this.showOne2=true;
    },
    clickTwo2(){
        this.showOne2=false;
    },
    cancelUpdate(){
        this.phone=''
        this.email=''
        this.password=''
        this.$message({
      message: '取消成功',
      type: 'success'
    });
    },
    update(){
          axios({
        method:'get',
        url:'http://localhost:5000/reader/updateUserMsg',
        params:{
            'userId':this.userId,
            'phone':this.elphone,
            'email':this.elemail,
            'password':this.elpassword
        }
    }).then(r=>{
        if(r.data.data.type==='修改成功！'){
            this.$message({
                message: '修改成功',
                type: 'success'
           });
        }else{
            this.$message.error(r.data.data.content);
        }
    }).catch(r=>{
        console.log(r)
    })
    if(this.phone!==null&&this.phone!==''){
        this.user.phone=this.phone
        this.phone=''
    }
    if(this.email!==null&&this.email!==''){
        this.user.email=this.email
        this.email=''
    }
    if(this.password!==null&&this.password!==''){
        this.user.password=this.password
        this.password=''
    }
    },
    getUser(){
        axios({
        method:'get',
        url:'http://localhost:5000/userMsg',
        params:{
            'userId':this.userId
        }
       
    }).then(r=>{//发送成功
        this. user=r.data.data
    }).catch(r=>{
    })
    },
    toPay(){
        this.dialogVisible = false
        console.log(this.money)
        console.log(parseFloat(this.money))
        
       
        axios({
        method:'get',
        url:'http://localhost:5000/pay',
        params:{
            'userId':this.userId,
            'money': parseFloat(this.money)
        }
       
    }).then(r=>{//发送成功
        window.open(r.data.url, '_blank');
        
    }).catch(r=>{
    })
    }
   
  },
};
</script>

<style scoped>
.everyRow {
  height: 80%;
  width: 35%;
  margin:70px;
}
.div {
  height: 100%;
  width: 100%;
  background-color: rgba(245, 245, 245, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.head{
    width:100%;
    height:8%;
}
.content{
    width:100%;
    height:92%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.click{
    height:100%;
    width:50%;
    background-color: rgba(255, 191, 191, 1);
    border-color:transparent;
    cursor: pointer;
    font-size:18px;
}
.notClick{
    height:100%;
    width:50%;
    background-color: rgba(166, 166, 166, 1);
    border-color:transparent;
    cursor: pointer;
    font-size:18px;
}
.money{
    width:150px;
    height: 25px;
    border-radius: 10px;
}
.click1{
    height:100%;
    width:100%;
    background-color: rgba(255, 191, 191, 1);
    border-color:transparent;
    cursor: pointer;
    font-size:18px;
}
.notClick1{
    height:100%;
    width:100%;
    background-color: rgba(166, 166, 166, 1);
    border-color:transparent;
    cursor: pointer;
    font-size:18px;
}
.everyCol{
    height:80%;
    width:80%;
 
}
.img{
    width:100%;
    height:40%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}
.img2{
    width:100%;
    height:40%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 10px; */
}
.allRow{
    width:80%;
    height:10%;
    margin-left:70px;
}
.touxiang{
    height:100%;
    width:auto;
}
.pay{
    height:100%;
    width:auto;
    margin-left:30px;
}
.yve{
    height:20%;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
   
}
.yve1{
    height:10%;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
   
}
.tou{
    width:100%;
    height:25%;
}
.updateRow{
    width:100%;
    height:15%;
}
.beforeCol{
    height:100%;
    width:30%;
    display: flex;
    justify-content: center;
    align-items: center
}
.afterCol{
    height:100%;
    width:70%;
    display: flex;
    align-items: center;
}
.dashed-line {
        border: 1px dashed rgba(229, 229, 229, 1); /* 设置边框为1像素的虚线，颜色为黑色 */
        width: 100%; /* 设置宽度为100% */
        height: 0; /* 设置高度为0，以便只显示边框 */
        margin: 20px 0; /* 设置边距 */
    }
    .inputUpdate{
        border-color:transparent;
        background-color: rgba(229, 229, 229, 1);
    }
    .updateBtn{
        background-color:rgba(143, 175, 185, 1);
        border-radius:10px;
        height:30px;
        width:80px;
        margin-left:70px;
        border-color: transparent;
        color:white;
        margin-top:20px;
        cursor: pointer;
    }
</style>